<template>
  <div class="container">
    <div class="page-header">
      <div class="header-content">
        <div class="back-button">
          <el-button
            @click="$router.push({ name: 'Jixiao' })"
            icon="el-icon-back"
            >返回</el-button
          >
        </div>
        <h1>绩效奖金基数报批表</h1>
      </div>
    </div>

    <div class="main-content">
      <div class="content-wrapper">
        <div class="form-actions">
          <el-button
            type="success"
            @click="saveData"
            icon="el-icon-check"
            :disabled="isView"
            >保存</el-button
          >
          <el-button type="" @click="goToList" icon="el-icon-menu"
            >列表</el-button
          >
          <el-button type="info" @click="handlePrint" icon="el-icon-printer"
            >打印</el-button
          >
        </div>

        <div class="print-content">
          <div class="print-header">
            <h2>绩效奖金基数报批表</h2>
          </div>

          <div class="form-info">
            <span
              >提报日期：
              <el-date-picker
                v-model="formData.reportDate"
                type="date"
                placeholder="选择日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                :disabled="isView"
              />
            </span>
          </div>

          <table class="approval-table">
            <thead>
              <tr>
                <th>工 号</th>
                <td>
                  <el-input v-model="formData.employeeId" :disabled="isView" />
                </td>
                <th>姓 名</th>
                <td><el-input v-model="formData.name" :disabled="isView" /></td>
                <th>入职日期</th>
                <td colspan="2">
                  <el-date-picker
                    v-model="formData.entryDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <th>任职部门</th>
                <td>
                  <el-input v-model="formData.department" :disabled="isView" />
                </td>
                <th>职 务</th>
                <td>
                  <el-input v-model="formData.position" :disabled="isView" />
                </td>
                <th>转正日期</th>
                <td colspan="2">
                  <el-date-picker
                    v-model="formData.confirmationDate"
                    type="date"
                    placeholder="选择日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    style="width: 100%"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <th>职位等级</th>
                <td>
                  <el-input
                    v-model="formData.positionLevel"
                    :disabled="isView"
                  />
                </td>
                <th>职 系</th>
                <td>
                  <el-input v-model="formData.jobSeries" :disabled="isView" />
                </td>
                <th>参考绩效基数</th>
                <td colspan="2">
                  <el-input-number
                    v-model="formData.referenceBonusBase"
                    :precision="2"
                    :step="100"
                    :disabled="isView"
                  />
                </td>
              </tr>
              <tr>
                <th colspan="7" class="bonus-apply-info">
                  <span>
                    申请绩效奖金基数：
                    <el-input-number
                      v-model="formData.applyBonusBase"
                      :precision="2"
                      :step="100"
                      :disabled="isView"
                    />
                    元/月，从
                    <el-date-picker
                      v-model="formData.effectiveDate"
                      type="date"
                      placeholder="选择日期"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      :disabled="isView"
                    />
                    月开始生效。
                  </span>
                </th>
              </tr>
            </thead>
          </table>

          <table class="approval-table">
            <tr>
              <th rowspan="3">直属部门评定意见</th>
              <td colspan="6">
                <el-input
                  type="textarea"
                  v-model="formData.departmentManager"
                  :rows="3"
                  :disabled="isView"
                />
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <span style="display: flex"
                  >部长/总监： <input type="text" v-model="formData.director"
                /></span>
              </td>
              <td>
                <span
                  >人资经理： <input type="text" v-model="formData.hrManager"
                /></span>
              </td>
            </tr>
            <tr>
              <td colspan="3">
                <span style="display: flex"
                  >总经理：
                  <input type="text" v-model="formData.generalManager"
                /></span>
              </td>
              <td>
                <span
                  >企管部部长：
                  <input type="text" v-model="formData.enterpriseManager"
                /></span>
              </td>
            </tr>
            <tr>
              <th>
                <span>总裁/董事长：</span>
              </th>
              <td colspan="4">
                <span class="opinion-item">
                  <div style="display: flex">
                    <label
                      ><input
                        type="checkbox"
                        v-model="formData.presidentApproval"
                      />
                      同意</label
                    >&emsp;
                    <label
                      ><input
                        type="checkbox"
                        v-model="formData.presidentHold"
                      />
                      暂缓再议，退件处理</label
                    >
                  </div>
                  <div style="display: flex; justify-content: end">
                    <span>总裁/董事长：</span>
                    <input type="text" v-model="formData.president" />
                  </div>
                </span>
              </td>
            </tr>
            <tr>
              <td colspan="5">
                <div class="form-footer">
                  <span>表单编号及版本：AM-JY-226 A/3</span>
                  <span>保存期限：长期</span>
                </div>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getById, saveOrUpdate } from "@/api/performance-bonus-base";

export default {
  data() {
    return {
      isView: false,
      isEdit: false,
      formData: {
        id: null,
        employeeId: "", // 工号
        name: "", // 姓名
        department: "", // 任职部门
        position: "", // 职务
        positionLevel: "", // 职位等级
        jobSeries: "", // 职系
        entryDate: "", // 入职日期
        confirmationDate: "", // 转正日期
        referenceBonusBase: null, // 参考绩效基数
        applyBonusBase: null, // 申请绩效奖金基数
        effectiveDate: "", // 生效日期
        reportDate: "", // 提报日期
        departmentManager: "", // 部门经理意见
        director: "", // 部长/总监意见
        generalManager: "", // 总经理意见
        hrSupervisor: "", // 人资主管意见
        hrManager: "", // 人资经理意见
        enterpriseManager: "", // 企管部部长意见
        president: "", // 总裁/董事长意见
        presidentApproval: false, // 总裁/董事长是否同意
        presidentHold: false, // 总裁/董事长是否暂缓
        status: 0, // 状态
      },
    };
  },
  created() {
    const { id, type } = this.$route.query;
    if (id) {
      this.loadData(id);
      this.isView = type === "view";
      this.isEdit = type === "edit";
    }
  },
  methods: {
    async loadData(id) {
      try {
        const { data } = await getById(id);
        this.formData = data.data;
      } catch (error) {
        this.$message.error("加载数据失败");
      }
    },
    async goToList() {
      this.$router.push({
        name: "JxjiangjjsList",
      });
    },
    validateForm() {
      if (!this.formData.employeeId) {
        this.$message.error("工号不能为空");
        return false;
      }
      if (!this.formData.name) {
        this.$message.error("姓名不能为空");
        return false;
      }
      if (!this.formData.department) {
        this.$message.error("任职部门不能为空");
        return false;
      }
      if (!this.formData.position) {
        this.$message.error("职务不能为空");
        return false;
      }
      if (!this.formData.applyBonusBase) {
        this.$message.error("申请绩效奖金基数不能为空");
        return false;
      }
      if (!this.formData.effectiveDate) {
        this.$message.error("生效日期不能为空");
        return false;
      }
      return true;
    },
    async saveData() {
      if (!this.validateForm()) {
        return;
      }
      try {
        const submitData = {
          ...this.formData,
          referenceBonusBase: Number(this.formData.referenceBonusBase),
          applyBonusBase: Number(this.formData.applyBonusBase),
        };

        await saveOrUpdate(submitData);
        this.$message.success("保存成功");
        this.$router.push({
          name: "JxjiangjjsList",
        });
      } catch (error) {
        this.$message.error("保存失败：" + (error.message || "未知错误"));
      }
    },
    handlePrint() {
      window.print();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .page-header {
    padding: 16px 20px;
    background-color: #fff;
    border-bottom: 1px solid #dcdfe6;
    display: flex;
    justify-content: center;

    width: 210mm;
    max-width: 100%;
    margin: 0 auto;

    .header-content {
      width: 210mm;
      max-width: 100%;
      display: flex;
      align-items: center;

      .back-button {
        margin-right: 20px;
      }

      h1 {
        margin: 0;
        font-size: 20px;
        font-weight: 500;
        color: #303133;
      }
    }
  }

  .main-content {
    flex: 1;
    padding: 20px;
    background-color: #f5f7fa;
    overflow: auto;
    display: flex;
    justify-content: center;
    width: 210mm;
    max-width: 100%;
    margin: 0 auto;

    .content-wrapper {
      width: 210mm;
      max-width: 100%;
      background-color: #fff;
      padding: 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
  }
}

.form-actions {
  margin-bottom: 20px;
  text-align: right;
}

.print-header {
  text-align: center;
  margin-bottom: 20px;

  h2 {
    font-size: 24px;
    font-weight: bold;
  }
}

.form-info {
  text-align: right;
  margin-bottom: 20px;
}

.approval-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;

  th,
  td {
    border: 1px solid #dcdfe6;
    padding: 12px;
  }

  th {
    background-color: #f5f7fa;
    font-weight: normal;
    width: 60px;
  }

  .bonus-apply-info {
    text-align: center;
  }
}
.form-footer {
  display: flex;
  justify-content: space-between;
}
input[type="checkbox"] {
  height: 13px;
}
@media print {
  .page-header {
    display: none !important;
  }
  .el-button {
    display: none !important;
}
  .main-content {
    padding: 0 !important;
    background-color: #fff !important;

    .content-wrapper {
      box-shadow: none !important;
      padding: 0 !important;
    }
    .page-header h2 {
      padding-top: 20px !important ;
    }
  }
  input {
    border: none !important;
    background-color: transparent !important;
    text-align: center;
  }

  textarea {
    border: 0px !important;
  }
  ::v-deep input.el-input__inner {
    border: none !important;
  }
  ::v-deep textarea.el-textarea__inner {
    border: none !important;
    resize: none !important;
  }
  ::v-deep i.el-input__icon {
    display: none !important;
  }
  ::v-deep span.el-input-number__decrease {
    display: none !important;
  }
  ::v-deep span.el-input-number__increase {
    display: none !important;
  }
}
</style>